前言

在過去，路由主要是 Server 負責，根據不同的路由去決定要渲染的頁面，回傳整個 HTML 回來，現在較多的架構是前後端分離，前端負責頁面呈現資料；後端負責提供資料

只要 API 格式定義好，前端可以隨意選擇任何框架或無框架開發

路由?

一種對照表的概念，根據不同的url地址來顯示不同的頁面或內容的功能
如果每次換頁都需要刷新頁面，會影響使用者體驗，於是發展出 由前端管理路由

原本後端負責的路由改由前端處理，從頭到尾只有一個 index.html ，切換頁面時，不是整個頁面切換，而是發送 Request 取得 Response，將資料更新

在這樣只有一個 index.html 的情況下，瀏覽器大致有兩種路由模式可以使用:

hash 模式

• URL 中的 # 符號，例如: https://www.example.com/#yoyoyo
• 比較不美觀
• 改變 # 後面的值，不會向 Server 發送請求，也不會刷新頁面
• 觸發 hashchange 事件

history 模式

• HTML 5 的 pushState() 和 replaceState() (History API)
• onpopstate 事件監聽

可以使用 history 物件中的 back() forward() go() 在歷史紀錄中移動，HTML5 增加的 history.pushState history.replaceState() 可以異動歷史紀錄

ex:

history.pushState(state [,title][,url]); // 歷史記錄中增加一條記錄

history.replaceState(state [,title][,url]); // 修改目前的歷史紀錄

安裝路由

vue add router
// 會詢問是否使用 history mode

產生以下檔案:

• views 資料夾
  • 包含兩個檔案 About.vue 和 Home.vue，代表頁面
• router/index.js
  • 路由的設定

ex:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

<!-- App.vue -->
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

使用 router-link 標籤，to 屬性後面接要造訪的頁面，router-view放置處代表要渲染元件的位置
ex:

// App.vue
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/profile">Profile</router-link>
  </div>
  <router-view/>
</template>

未完待續...

參考

How to Use Vue Router: A Complete Tutorial

淺談新手在學習 SPA 時的常見問題：以 Router 為例

下篇預告

• Vue Router 續

每日一句:
批評你的人，是你生命中的貴人